<template>
  <div class="ranking-header">
    <div class="fhui">
      <span @click="$router.go(-1)">
        <svg t="1636909612759" class="icon" viewBox="0 0 1307 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2237" width="20" height="20"><path d="M268.70922 566.468085h929.588652c36.312057 0 72.624113-29.049645 72.624114-72.624113 0-36.312057-29.049645-72.624113-72.624114-72.624114H305.021277l297.758865-297.758865c29.049645-29.049645 29.049645-72.624113 0-101.673759-29.049645-29.049645-72.624113-29.049645-101.673759 0L72.624113 450.269504c-14.524823 14.524823-21.787234 36.312057-21.787234 58.09929 0 21.787234 0 43.574468 21.787234 58.099291l428.48227 428.48227c29.049645 29.049645 72.624113 29.049645 101.673759 0 29.049645-29.049645 29.049645-72.624113 0-101.673759l-334.070922-326.808511z" fill="#ffffff" p-id="2238"></path></svg>
      </span>
      <span v-if="ok" @click="ok=!ok"><svg t="1636909962813" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3344" width="20" height="20"><path d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z" p-id="3345" fill="#ffffff"></path></svg></span>
       <span v-else @click="ok=!ok"><svg t="1636909962813" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3344" width="20" height="20"><path d="M667.786667 117.333333C832.864 117.333333 938.666667 249.706667 938.666667 427.861333c0 138.250667-125.098667 290.506667-371.573334 461.589334a96.768 96.768 0 0 1-110.186666 0C210.432 718.368 85.333333 566.112 85.333333 427.861333 85.333333 249.706667 191.136 117.333333 356.213333 117.333333c59.616 0 100.053333 20.832 155.786667 68.096C567.744 138.176 608.170667 117.333333 667.786667 117.333333z" p-id="3345" fill="#d43c33"></path></svg></span>
    </div>
    <div
    v-if="rank.coverImgUrl"
      class="bpic"
      :style="{
        backgroundImage:
          'url('+rank.coverImgUrl+')'
      }"
    ></div>
    <div class="pic">
      <img
        :src="rank.coverImgUrl  | imageView(246)"
        alt=""
      />
      <span>
        <svg
          t="1635767343722"
          class="icon"
          viewBox="0 0 1026 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4626"
          width="20"
          height="20"
        >
          <path
            d="M627.828503 167.989142a191.923353 191.923353 0 0 0-229.613094 0 31.936128 31.936128 0 0 0 37.996328 51.343074 128.461924 128.461924 0 0 1 153.620439 0 31.936128 31.936128 0 0 0 37.996327-51.343074zM513.021956 2.043912C231.268663 2.043912 2.043912 231.268663 2.043912 513.021956v319.361278a31.92182 31.92182 0 0 0 31.925908 31.946347h63.892695v127.744511a31.925908 31.925908 0 0 0 63.851816 0v-63.892695h79.671697a48.123912 48.123912 0 0 0 48.072814-48.072814V529.168862a48.123912 48.123912 0 0 0-48.072814-48.072814H145.935329a48.123912 48.123912 0 0 0-48.072814 48.072814v15.779002H65.916168V513.021956c0-246.536687 200.569102-447.105788 447.105788-447.105788S960.127745 266.485269 960.127745 513.021956v31.925908h-31.946348v-15.779002a48.123912 48.123912 0 0 0-48.072814-48.072814h-95.450699a48.123912 48.123912 0 0 0-48.072814 48.072814v350.939721a48.123912 48.123912 0 0 0 48.072814 48.072814h79.671697v63.892695a31.925908 31.925908 0 0 0 63.851816 0v-127.744511h63.892695A31.92182 31.92182 0 0 0 1024 832.383234V513.021956C1024 231.268663 794.77525 2.043912 513.021956 2.043912zM161.714331 544.947864h63.892695v319.381717H161.714331V544.947864z m-63.851816 63.892695v191.596327H65.916168v-191.596327h31.946347z m702.574371 255.489022V544.947864h63.892695v319.381717h-63.892695z m159.690859-63.892695h-31.946348v-191.596327h31.946348v191.596327zM513.021956 544.947864a31.909557 31.909557 0 0 0-31.925908 31.946348v255.489022a31.925908 31.925908 0 1 0 63.851816 0v-255.489022A31.909557 31.909557 0 0 0 513.021956 544.947864z m127.744511 63.892695a31.88503 31.88503 0 0 0-31.925908 31.925908V768.510978a31.925908 31.925908 0 0 0 63.851816 0v-127.744511a31.88503 31.88503 0 0 0-31.925908-31.925908z m-255.489022 0a31.88503 31.88503 0 0 0-31.925908 31.925908V768.510978a31.925908 31.925908 0 0 0 63.851816 0v-127.744511a31.88503 31.88503 0 0 0-31.925908-31.925908z"
            p-id="4627"
            fill="#e6e6e6"
          ></path></svg
        >{{ calculation }}万</span
      >
      <p>歌单</p>
    </div>
    <div class="right">
      <p>{{ rank.name }}</p>
      <div class="sx" v-if="rank.creator">
        <span class="spana"> <img :src="rank.creator.avatarUrl + '?imageView=1&type=webp&thumbnail=246x0'" alt="" /> </span
        >
        <span>{{ rank.creator.nickname }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data:function(){
return{
ok:true
}
  },
  props: {
    rank: Object,
  },
  computed: {
    calculation: function () {
      return parseInt(this.rank.playCount / 1000) / 10;
    },
    
  },
};
</script>

<style lang="less" scoped>
.ranking-header {
  position: relative;
  .fhui{
    position:absolute;
    top: 5px;
    left: 4%;
    width: 92%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span{
      width: 20px;
      height: 20px;
      // background-color: #fff;
    }
  }
  width: 100%;
  // height: 300px;
  height: auto;
  padding: 30px 0 20px 0;
  position: relative;
  overflow: hidden;
  // background-color: pink;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .pic {
    width: 38%;
    height: auto;
    position: relative;
    padding-left: 15px;
    margin-right: 10px;
    img {
      width: 100%;
      height: auto;
    }
    p {
      position: absolute;
      top: 5px;
      left: 15px;
      color: white;
      background-color: rgb(255, 0, 0);
      font-size: 14px;
      padding: 0 2px;
      border-radius: 0 10px 10px 0;
    }
    span {
      position: absolute;
      top: 0;
      right: 5px;
      color: rgb(255, 255, 255);
      font-size: 12px;
      svg {
        zoom: 0.05;
      }
    }
  }
  .right {
    width: 58%;
    padding-right: 15px;
    padding-left: 10px;
    padding-bottom: 40px;

    color: white;

    p {
      font-size: 18px;
      margin: 0;
         flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sx {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      span{
        font-size: 14px;

      }
      span{
        color:#CCC;
      }
      .spana {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 15px;
        img {
          width: 100%;
          zoom: 0.04;
          border-radius: 50%;
        }
      }
    }
  }
}
.bpic {
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-color: red;
  filter: blur(15px) brightness(0.6);
  z-index: -1;
  width: 100%;
  height: 100%;
}
</style>